<template>
  <div class="mycard">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('我的银行卡')}}</div>
      </div>
    </div>
  <div class="wrapper">
    <div class="content_list" v-if="myCardList.length > 0">
      <!--        收款银行-->
      <div class="content_item"
           v-for="(item) in myCardList" :key="item.id" @click="onDefaultClick(item)">
        <div class="card_box"  >
          <div class="title">{{ item.bankcardName }}</div>
          <div class="card_content">
            <div style="margin-bottom: 10px;letter-spacing: 1px"> {{ item.bankcard }}</div>
          </div>
        </div>
      </div>
      <!--        <div class="confirm" v-show="cardShow">-->
      <!--          <button @click="confirm">{{ $t('add') }}</button>-->
      <!--        </div>-->

    </div>
    <template v-else>
      <div class="no_content" >
        <img class="image" src="../../../assets/my/is_null.png">
      </div>
    </template>
    <div class="add_card" @click="confirm">
      <van-button style="width: 100%" icon="plus" round type="primary">{{ $t('添加收款银行') }}</van-button>
    </div>
  </div>
    <van-action-sheet v-model:show="defaultShow">
      <van-picker @confirm="onDefaultSelect" @cancel="defaultShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="defaultActions"/>
    </van-action-sheet>
  </div>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import {fetchMyCard, upDateMyCard} from '@/api/home'
import {useI18n} from 'vue-i18n'
import {Toast} from "vant";
import router from "@/router";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

export default {
  setup() {
    const {t} = useI18n()
    const store = useStore()
    const myCardList = ref([])
    const routes = useRoute()
    const searchCard = async () => {
      const res = await fetchMyCard()
      if (res.code === 1) {
        console.log(res.data)
        myCardList.value = res.data.sort((a, b) => {
          return b.isSelected - a.isSelected
        })
      }

    }
    let defaultSheet = reactive({
      defaultShow: false,
      defaultForm: {
        isSelected: null,
        status: null,
        id: null
      },
      defaultActions: [
        {value: t('设置默认'), key: 1},
        // {value: t('解绑'), key: 2},
      ],
      onDefaultSelect: async ({key}) => {
        key === 1 ? defaultSheet.defaultForm.isSelected = key : defaultSheet.defaultForm.status = key
        defaultSheet.defaultShow = false
        const res = await upDateMyCard(defaultSheet.defaultForm)
        if (res.code === 1) {
          searchCard()
          defaultSheet.defaultForm = {
            isSelected: null,
            status: null,
            id: null
          }
        }
      },
      onDefaultClick({id, isSelected}) {
        if (isSelected === 1) return
        if (myCardList.value.length === 1) return Toast({message: t('卡包中至少有一张收款银行卡')})
        defaultSheet.defaultShow = true
        defaultSheet.defaultForm.id = id
      }
    })
    onMounted(() => {
      // 清除loading
      store.dispatch('changeLoading', false)
    })
    searchCard()
    const confirm = () => {

      router.push({
        path: '/SeyVWhOfsfl',
      })
    }
    return {
      confirm,
      myCardList,
      ...toRefs(defaultSheet)
    }
  }
}
</script>

<style lang="less" scoped>
.mycard {
  overflow: auto;
  .wrapper{
    margin-top: -150px;
    background: #F7F7F7;
    border-radius: 10px;
  }
  .content_list {
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;

    .content_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      border-radius: 10px;
      color: #333333;
      .card_box {
        width: 100%;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 10px 20px;
        position: relative;
        color: #15B3B2;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        background-size: 100% 100%;
        background-image: url("../../../assets/my/my_card_bg.png");
        font-family: Space Grotesk-Regular;
        .title {
          font-size: 24px;
          margin: 15px 0
        }
        .card_header {
          font-size: 16px;
          float: right;
          padding-top: 10px;
        }

        .card_image {
          position: absolute;
          bottom: 0;
          right: 40px;
        }

        .card_content {
          font-size: 20px;
          margin-top: 25px;

        }
      }
    }
  }

  .add_card {
    box-sizing: border-box;
    padding: 15px 10%;
    width: 100%;
    border-radius: 20px;
    color: #828282;
    text-align: center;
    font-size: 18px;
  }
}
</style>
